import React, { useState } from 'react'
import { Picker, Button, Space, Calendar } from "antd-mobile-v5"
import { history } from "umi"
import dayjs from 'dayjs'
export default function Serch() {
    const [citys, setCitry] = useState([[
        { label: "杭州", value: '001' },
        { label: "湖南", value: "002" },
    ]])
    const [citysVla, setCitysVla] = useState<(string | null)[]>([])
    const [timeShow, setTimeShow] = useState(false)
    const defaultSingle = new Date('2022-03-09')

    const defaultRange: [Date, Date] = [
        new Date('2022-03-09'),
        new Date('2022-03-21'),
    ]
    const [timeVal, setTimeVal] = useState("可选时间")

    const goSeach = () => {
        history.push("/search")
    }
    return (
        <div>
            {/* 可选城市 */}
            <div style={{
                width: "90%",
                margin: "auto",
                backgroundColor: "#fff",
                height: "40px",
                lineHeight: '40px',
                padding: "0px 5px",
                borderBottom: "1px solid #ccc"
            }}  >
                <Picker
                    columns={citys}
                    value={citysVla}
                    onConfirm={setCitysVla}
                    onSelect={(val, extend) => {
                        console.log('onSelect', val, extend.items)
                    }}
                >
                    {(items, { open }) => {
                        return (
                            <Space align='center'>
                                <Button onClick={open}>选择</Button>
                                {items.every(item => item === null)
                                    ? '未选择'
                                    : items.map(item => item?.label ?? '未选择')}
                            </Space>
                        )
                    }}
                </Picker>
            </div>
            {/* 可选时间 */}
            <div style={{
                width: "90%",
                margin: "auto",
                backgroundColor: "#fff",
                height: "40px",
                lineHeight: '40px',
                padding: "0px 5px",
                display: "flex",
                justifyContent: "space-between"
            }}>
                <p onClick={() => { setTimeShow(true) }}>出租时间</p>
                <p>{timeVal}</p>
            </div>
            {/* 搜索民宿 */}
            <div style={{
                width: "90%",
                margin: "auto",
                backgroundColor: "orange",
                color: "#fff",
                textAlign: "center",
                height: "40px",
                lineHeight: '40px',
                padding: "0px 5px",
            }} onClick={goSeach}>
                搜索民宿
            </div>
            {timeShow && <Calendar
                defaultValue={defaultRange}
                selectionMode='range'
                onChange={val => {
                    console.log(val)
                    setTimeShow(false)
                }}
            />}
        </div>
    )
}

